<%- contentFor('heroContent') %>
  <!-- Hero Banner with Search -->
  <div class="hero-banner">
    <div class="hero-content">
      <h1>Search for ISBN on this website</h1>
      <div class="search-box-container">
        <form action="/search" method="GET" class="main-search-form">
          <div class="search-select-wrapper">
            <select name="searchType">
              <option value="all">All</option>
              <option value="title">Title</option>
              <option value="author">Author</option>
              <option value="isbn">ISBN(13 digits)</option>
              <option value="issn">ISSN(8 digits)</option>
              <option value="publisher">Publisher</option>
            </select>
          </div>
          <input type="text" name="query" placeholder="Type ISBN or title..." class="main-search-input">
          <button type="submit" class="main-search-btn">
            <i class="search-icon"></i>
          </button>
        </form>
      </div>
    </div>
  </div>

  <!-- Recommended Books Section -->
  <div class="section-container">
    <h2 class="section-title">Recommended Books</h2>
    <div class="book-grid">
      <% if (books && books.length> 0) { %>
        <% books.slice(0, 10).forEach((book, index)=> { %>
          <div class="book-card">
            <a href="/books/detail/<%= book.id %>" class="book-link">
              <div class="book-cover">
                <% if (book.CoverImage) { %>
                  <img src="<%= book.CoverImage %>" alt="<%= book.Title || 'Book Cover' %>">
                  <% } else { %>
                    <img src="/images/img.png" alt="<%= book.Title || 'Book Cover' %>" class="placeholder-image">
                    <% } %>
              </div>
              <div class="book-info">
                <h3 class="book-title">
                  <%= book.Title || 'Book Title' %>
                </h3>
                <p class="book-author">
                  <%= book.Authors || 'Unknown Author' %>
                </p>
              </div>
            </a>
          </div>
          <% }); %>
            <% } else { %>
              <!-- No data card -->
              <div class="book-card">
                <div class="book-cover">
                  <img src="/images/img.png" alt="No Books Found" class="placeholder-image">
                </div>
                <div class="book-info">
                  <h3 class="book-title">No Books Available</h3>
                  <p class="book-author">Please upload book data</p>
                </div>
              </div>
              <% } %>
    </div>
  </div>

  <!-- Recommended Journals Section -->
  <div class="section-container">
    <h2 class="section-title">Recommended Journals</h2>
    <div class="book-grid">
      <% if (data && data.length> 0) { %>
        <% data.slice(0, 10).forEach((journal, index)=> { %>
          <div class="book-card">
            <a href="/journals/<%= journal.id %>" class="book-link">
              <div class="book-cover">
                <% if (journal.CoverImage) { %>
                  <img src="<%= journal.CoverImage %>" alt="<%= journal.Title || 'Journal Cover' %>">
                  <% } else { %>
                    <img src="/images/img.png" alt="<%= journal.Title || 'Journal Title' %>" class="placeholder-image">
                    <% } %>
              </div>
              <div class="book-info">
                <h3 class="book-title">
                  <%= journal.Journals || journal.Title || 'Journal Title' %>
                </h3>
                <!-- <p class="book-author">
                  <%= journal.Authors || 'Unknown Author' %>
                </p> -->
                <% if (journal.ISSN) { %>
                  <p class="journal-issn">ISSN: <%= journal.ISSN %>
                  </p>
                  <% } %>
              </div>
            </a>
          </div>
          <% }); %>
            <% } else { %>
              <!-- No data card -->
              <div class="book-card">
                <div class="book-cover">
                  <img src="/images/img.png" alt="No Journals Found" class="placeholder-image">
                </div>
                <div class="book-info">
                  <h3 class="book-title">No Journals Available</h3>
                  <p class="book-author">Please upload journal data</p>
                </div>
              </div>
              <% } %>
    </div>
  </div>

  <!-- Contact Form Section -->
  <div class="contact-section" id="contact">
    <h2 class="section-title">Talk To Us</h2>
    <div class="contact-form-container">
      <form id="contactForm" action="/contact" method="POST">
        <div class="form-row">
          <div class="form-field">
            <label for="name">Name:</label>
            <input type="text" id="name" name="name" required>
            <span class="required">*</span>
          </div>

          <div class="form-field">
            <label for="phone">Phone:</label>
            <input type="text" id="phone" name="phone" required>
            <span class="required">*</span>
          </div>

          <div class="form-field">
            <label for="email">Email:</label>
            <input type="email" id="email" name="email" required>
            <span class="required">*</span>
          </div>
        </div>

        <div class="form-field">
          <label for="message">Message:</label>
          <textarea id="message" name="message" placeholder="Message will be displayed after confirmation"
            rows="5"></textarea>
        </div>

        <div class="form-row">
          <div class="form-field captcha-field">
            <label for="captcha">Captcha:</label>
            <input type="text" id="captcha" name="captcha" required>
            <img src="/captcha" alt="Captcha" class="captcha-img">
          </div>

          <div class="form-submit">
            <button type="submit" class="submit-button">Submit</button>
          </div>
        </div>
      </form>
    </div>
  </div>
